<template>
    <div class="template"> 
        <h3>示例</h3>
        <div class="elWrapper">
            <!-- 标准表格简单的查询功能 -->
            <standard-template 
                :queryParams="queryParams"
                :tableParams="tableParams"
                @selectedData="selectedData"
            >
            </standard-template>
        </div>
        <div class="markdown-body">
            <standardTemplateMd></standardTemplateMd>
        </div>
    </div>  
</template>
<script>
import {queryApi, fileUpload, fileUploadvideo} from '@/api/api'
import StandardTemplate from '../components/StandardTemplate'
import standardTemplateMd from "../md/standardTemplateMD.md"
export default {
    name: "Home",
    components: {
        StandardTemplate,
        standardTemplateMd
    },
    data() {
      return {
            //查询区域数据
            queryParams: {
                dragStateFlag:false,//是否拖拽表头
                maxHeight:'50px',
                // 搜索元素渲染
                searchRender: [
                    { field: 'name', label: '姓名', type: '$input', placeholder: '请输入昵称', span:6},
                    { field: 'role', label: '角色', type: '$input', placeholder: '请输入角色', span:6, disabled:true},
                    { field: 'sex', label: '性别', type: '$select', placeholder: '请选择性别', span:6, options: [{ label: '男', value: '0' }, { label: '女', value: '1' }]},
                    { field: 'age', label: '年龄', type: '$input', placeholder: '请输入年龄', span:6},
                    { field: 'flag1', label: '是否单身', type: '$radio', span:6, options: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] },
                    { field: 'single', label: '是否出库', type: '$checkbox', span:6},
                    { field: 'num', label: '数字', type: '$input', validate: 'number', placeholder: '请输入数值', span:6 },
                    { field: 'date', label: '日期', type: '$date', datetype: 'daterange', format: 'yyyy-MM-dd', valueformat: 'yyyy-MM-dd', validate: 'date', placeholder: '请选择日期', span:6, rangeSeparator: '至', startPlaceholder: '开始日期', endPlaceholder: '结束日期'
                    },
                    { field: 'date', label: '日期', type: '$date', datetype: 'date', format: 'yyyy-MM-dd', valueformat: 'yyyy-MM-dd', validate: 'date', placeholder: '请选择日期', span:6, pickerOptions:'pickerOptions'},
                    // { field: 'checkedList', label: '爱好', visibleMethod: this.visibleMethod, type: '$checkboxs', span:24, options: [{ label: '运动、跑步', value: '1' }, { label: '听音乐', value: '2' }, { label: '泡妞', value: '3' }, { label: '吃美食', value: '4' }] },
                    // { field: 'remark', label: '备注', type: '$textarea', span: 24},
                    { 
                        align: 'right',
                        span: 24, 
                        type: '$buttons',
                        children: [
                            //type按相应类别传入如下值 按规定传 
                            {type: 'del', content: '删除', status: 'primary', size:"mini", disabled:true},
                            {type: 'colsConfig', content: '列配置', status: 'primary', handler: 'searchFn', size:"mini"},
                            {type: 'del', content: '删除', status: 'primary', size:"mini"},
                            {type: 'save', content: '保存', status: 'primary', size:"mini"},
                            {type: 'add', content: '新增', status: 'primary', size:"mini"},
                            {type: 'reset', content: '重置', status: 'primary', size:"mini"},
                            {type: 'search', content: '查询', status: 'primary', size:"mini"}
                        ] 
                    }
                ],
                //时间空间范围控制
                pickerOptionConfig: {
                    pickerOptions: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        },
                    },
                    pickerOptionstwo: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        },
                    }
                },
                // 搜索数据绑定
                queryData: {
                    name: '张三',
                    role: '',
                    sex: '',
                    age: '',
                    flag1: '',
                    single: true,
                    checkedList: ["线下主题活动"],
                    num: '',
                    date: '',
                    center: '',
                    remark: '',
                    pageNum: 1,
                    pageSize: 10,
                    delFlag: 0,
                    
                }
            },
            // 表格数据(上下布局)
            tableParams: {
                tableRowClassName:this.tableRowClassNameColor,
                // 表格接口地址  详细地址在api配置
                // url:urlCommon.queryApi.url,
                // height:''
                // apiName: '',//"queryApi"
                tableStyle: 1, //1--主子表格上下布局  2---主子表格左右布局
                // 风格主题
                // tooltip:"dark",
                // 表头数据
                columns:[
                    {prop: '', label: '', width: '60', align: 'center',type:"selection",fixed:'',isShow:true},
                    {prop: 'classificationStr', label: '商品分类', align: 'center',type:"input",fixed:'',isShow:false},
                    {prop: 'levelString',label: '等级', align: 'center',type:"dictionary",fixed:'',filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}],propString:"level",isShow:true},
                    // propString 最后要转换为文字的字段 formatterArrayString:"LEVEL",
                    //filterProp:自定义数据字典  filterProp:[{"level":1,"levelString":"一级"},{"level":2,"levelString":"二级"},{"level":3,"levelString":"三级"}]
                    //formatterArrayString:接口返回数据字典数据名 例如:"LEVEL" "IS_MARRY"
                    {prop: 'levelDesc', label: '审核结果', align: 'center',type:"",fixed:'',isShow:true,isSortable:"custom"},
                    // {prop: 'commodityTypeId', label: 'ID', align: 'center',type:"",fixed:'',isShow:true,isSortable:true},
                    {prop: 'echartsColumn', label: '图表', align: 'center',type:"echartsColumn",fixed:'',isShow:true,isSortable:true}
                ],
                // 表格数据
                tableData: [
                    {id:1,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护口罩","commodityTypeId":"10000","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
                    {id:2,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '直接访问',type: 'bar',barWidth: '60%',data: [10, 52, 200, 334, 390, 330, 220]}],seriesType:"pillar"}},
                    {id:3,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:4,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:5,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:6,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:7,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:8,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:9,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:10,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:11,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:12,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:13,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:14,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":3,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:15,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 一次性口罩","commodityTypeId":"10001","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:16,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 防护面具及配件","commodityTypeId":"10002","level":1,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '邮件营销',type: 'line',stack: '总量',data: [120, 132, 101, 134, 90, 230, 210]}],seriesType:"line"}},
                    {id:17,"classificationStr":"劳保/安全/消防 - 呼吸防护 - 电动送风呼吸防护系统","commodityTypeId":"10003","level":2,"levelDesc":"可以上","echartsColumn":{seriesData:[{name: '蒸发量',type: 'bar',data: [2.0, 4.9]},{name: '降水量',type: 'bar',data: [2.6, 5.9]},{name: '平均温度',type: 'line',yAxisIndex: 1,data: [2.0, 2.2]}],seriesType:"pillarLine"}},
                    
                ],
                //主表主键  主子表的时候必填
                id: "id",
                // 分页
                pageSizeOpt: ['10','20','50','100','200'],
                pageNum:1,
                pageSize:10,
                // 表格高度最大值
                maxHeight:300, //上下布局主子表250 单表450
                width:100,
            },    
        }
    },
    methods: {
        tableRowClassNameColor({row,rowIndex}){
            if (rowIndex%2 == 0) {
                return 'warning-row';
            } else{
                return 'success-row';
            }
            return '';
        },
        lookHandle(row) {
            console.log(row)
        },
        //表格新增/删除/修改后的数据保存操作
        saveHandler(data) {
            // console.log(data)
            console.log("这里写保存的逻辑----保存成功")
        },
        delHandler$before(data) {
            console.log('这里写删除前的逻辑')
        },
        delHandler$after(data) {
            console.log('这里写删除后的逻辑')
        },
        childSaveHandler(data) {
            console.log("这里写子表保存的逻辑----保存成功")
        },
        childDelHandler$before(data) {
            console.log('这里写子表删除前的逻辑')
        },
        childDelHandler$after(data) {
            console.log('这里写子表删除后的逻辑')
        },
    },
    mounted(){
        // console.log(urlCommon.queryApi.url)
    }
}
</script>
<style scoped lang>
    .elWrapper{
        width:100%;
        /* padding:10px 20px; */
        box-sizing:border-box;
    }
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #f0f9eb;
    }
</style>


